var lang_mark = "en";
var lang_config = {};

var statusIndex = 0;
var BoxColorSel = 0;
var lightsSel = 1;
var lightSignalSel = -1;
var selLoading = false;

//全局pixi app
var pixi_app = null;

//雨棚
var cargoRain = null;
var cargoRainDefaultY = 375;

//黑色车盖
var cargoBlackTop = null;
var cargoBlackTopDefaultY = 420.5;

var cargoTopSpeed = 1;

//绿色车盖
var cargoGreenTop = null;

var cargoMintTop = null;
var cargoVioletTop = null;

//车箱
var cargoCarriage = null;
var cargoCarriageBack = null;
var cargoCarriageDefaultY = 543;
var cargoCarriageBackDefaultY = 543;

//侧灯
var lightsSide = null;

//头灯
var lightsFront = null;

//座椅
var cargoSeat = null;

//把手上部分
var cargoHandleTop = null;
//把手下部分
var cargoHandleBottom = null;

//阴影
var shadowWheel = null;
var shadowBody = null;
var shadowShield = null;

//侧灯关转向
var sideLights1 = false;
var sideLights2 = false;
var sideLightsWidth = 0;
var lightMask1 = false;
var lightMask2 = false;
var sideLightsOff = false;

$(() => {
  //加载语言
  langChange();

  // 初始化 Pixi 应用
  pixi_app = new PIXI.Application({
    width: 2400,
    height: 1062,
    antialias: true,
    backgroundColor: "0xe0deda",
    resolution: 1,
  });

  // 将画布添加到页面
  document.getElementById("pixi-canvas").appendChild(pixi_app.view);

  //显示控件
  setTimeout(() => {
    $(".cargo-itsimple").removeClass("hide");
  }, 1000);

  //前轮
  let frontWheel = PIXI.Sprite.from("./images/front-wheel.png"); // 替换为你的图片URL
  frontWheel.anchor.set(0.5); // 设置旋转中心
  frontWheel.x = 791;
  frontWheel.y = 750;
  pixi_app.stage.addChild(frontWheel);

  let frontWheelMask = PIXI.Sprite.from("./images/front-wheel-mask.png"); // 替换为你的图片URL
  frontWheelMask.anchor.set(0.5); // 设置旋转中心
  frontWheelMask.x = 795;
  frontWheelMask.y = 750;
  pixi_app.stage.addChild(frontWheelMask);

  //车箱后景
  cargoCarriageBack = PIXI.Sprite.from("./images/carriage-back.png");
  cargoCarriageBack.anchor.set(0.5);
  cargoCarriageBack.x = 1099;
  cargoCarriageBack.y = cargoCarriageBackDefaultY;
  pixi_app.stage.addChild(cargoCarriageBack);

  //后轮
  let backWheel = PIXI.Sprite.from("./images/back-wheel.png"); // 替换为你的图片URL
  backWheel.anchor.set(0.5); // 设置旋转中心
  backWheel.x = 1576;
  backWheel.y = 530;
  pixi_app.stage.addChild(backWheel);

  let backWheelMask = PIXI.Sprite.from("./images/back-wheel-mask.png"); // 替换为你的图片URL
  backWheelMask.anchor.set(0.5); // 设置旋转中心
  backWheelMask.x = 1576;
  backWheelMask.y = 530;
  pixi_app.stage.addChild(backWheelMask);

  //阴影
  shadowWheel = PIXI.Sprite.from("./images/carshadows-wheel.png");
  shadowWheel.anchor.set(0.5); // 设置旋转中心
  shadowWheel.x = 1206;
  shadowWheel.y = 820;
  shadowWheel.alpha = 1;
  pixi_app.stage.addChild(shadowWheel);

  shadowBody = PIXI.Sprite.from("./images/carshadows-body.png");
  shadowBody.anchor.set(0.5); // 设置旋转中心
  shadowBody.x = 1206;
  shadowBody.y = 820;
  shadowBody.alpha = 1;
  pixi_app.stage.addChild(shadowBody);

  shadowShield = PIXI.Sprite.from("./images/carshadows-shield.png");
  shadowShield.anchor.set(0.5); // 设置旋转中心
  shadowShield.x = 1206;
  shadowShield.y = 820;
  shadowShield.alpha = 0;
  pixi_app.stage.addChild(shadowShield);

  //座椅
  cargoSeat = PIXI.Sprite.from("./images/seat.png");
  cargoSeat.anchor.set(0.5);
  cargoSeat.x = 1526;
  cargoSeat.y = 360;
  pixi_app.stage.addChild(cargoSeat);

  //车身
  const cargoBody = PIXI.Sprite.from("./images/cargobody.png");
  cargoBody.anchor.set(0.5);
  cargoBody.x = pixi_app.screen.width / 2;
  cargoBody.y = pixi_app.screen.height / 2;
  pixi_app.stage.addChild(cargoBody);

  //车箱
  cargoCarriage = PIXI.Sprite.from("./images/carriage.png");
  cargoCarriage.anchor.set(0.5);
  cargoCarriage.x = 1099;
  cargoCarriage.y = cargoCarriageDefaultY;
  pixi_app.stage.addChild(cargoCarriage);

  //侧灯
  lightsSide = PIXI.Sprite.from("./images/lights-side.png");
  lightsSide.anchor.set(0.5);
  lightsSide.x = 966;
  lightsSide.y = 506;
  lightsSide.alpha = 0;
  pixi_app.stage.addChild(lightsSide);

  //侧灯
  PIXI.Loader.shared.add("./images/slider-light-1.png").load(() => {
    sideLights1 = new PIXI.Sprite(
      PIXI.Loader.shared.resources["./images/slider-light-1.png"].texture
    );
    sideLights1.x = 887;
    sideLights1.y = 468;
    sideLights1.alpha = 0;
    pixi_app.stage.addChild(sideLights1);

    lightMask1 = new PIXI.Graphics();
    lightMask1.beginFill(0xe0deda); // 遮罩颜色不重要，因为它是不可见的
    lightMask1.drawRect(0, 0, 1, sideLights1.height); // 初始宽度设置为 0
    lightMask1.endFill();
    lightMask1.x = sideLights1.x;
    lightMask1.y = sideLights1.y;

    pixi_app.stage.addChild(lightMask1);

    sideLights1.mask = lightMask1;

    sideLightsWidth = sideLights1.width;

    PIXI.Loader.shared.add("./images/slider-light-2.png").load(() => {
      sideLights2 = new PIXI.Sprite(
        PIXI.Loader.shared.resources["./images/slider-light-2.png"].texture
      );
      sideLights2.x = 887;
      sideLights2.y = 468;
      sideLights2.alpha = 0;
      pixi_app.stage.addChild(sideLights2);

      lightMask2 = new PIXI.Graphics();
      lightMask2.beginFill(0xe0deda); // 遮罩颜色不重要，因为它是不可见的
      lightMask2.drawRect(0, 0, 1, sideLights2.height); // 初始宽度设置为 0
      lightMask2.endFill();
      lightMask2.x = sideLights2.x;
      lightMask2.y = sideLights2.y;

      pixi_app.stage.addChild(lightMask2);

      sideLights2.mask = lightMask2;

      sideLightsWidth = sideLights2.width;

      PIXI.Loader.shared.add("./images/handle-bottom.png").load(() => {
        cargoHandleBottom = new PIXI.Sprite(
          PIXI.Loader.shared.resources["./images/handle-bottom.png"].texture
        );

        cargoHandleBottom.anchor.set(0.5);
        cargoHandleBottom.pivot.x = cargoHandleBottom.width;
        cargoHandleBottom.pivot.y = cargoHandleBottom.height;
        cargoHandleBottom.x = 1405 + (25 * 20) / 100;
        cargoHandleBottom.y = 265 - (60 * 20) / 100;

        cargoHandleBottom.rotation = -10 * (Math.PI / 180);

        pixi_app.stage.addChild(cargoHandleBottom);

        //把手
        cargoHandleTop = PIXI.Sprite.from("./images/handle-top.png");
        cargoHandleTop.anchor.set(0.5);
        cargoHandleTop.x = 1365 - (50 * 20) / 100;
        cargoHandleTop.y = 145 + (35 * 20) / 100;
        pixi_app.stage.addChild(cargoHandleTop);

        //雨棚
        cargoRain = PIXI.Sprite.from("./images/rain.png");

        cargoRain.pivot.x = 840;
        cargoRain.pivot.y = 300;
        cargoRain.x = 1589;
        cargoRain.y = cargoRainDefaultY;
        cargoRain.alpha = 0;

        cargoRain.rotation = 15 * (Math.PI / 180);
        pixi_app.stage.addChild(cargoRain);
      });
    });
  });

  //头灯
  lightsFront = PIXI.Sprite.from("./images/light-front.png");
  lightsFront.anchor.set(0.5);
  lightsFront.x = 276;
  lightsFront.y = 756;
  lightsFront.alpha = 0;
  pixi_app.stage.addChild(lightsFront);

  //黑色车盖
  cargoBlackTop = PIXI.Sprite.from("./images/black.png");
  cargoBlackTop.anchor.set(0.5);
  cargoBlackTop.x = 1096;
  cargoBlackTop.y = cargoBlackTopDefaultY;
  pixi_app.stage.addChild(cargoBlackTop);

  //绿色车盖
  cargoGreenTop = PIXI.Sprite.from("./images/green.png");
  cargoGreenTop.anchor.set(0.5);
  cargoGreenTop.x = 1096;
  cargoGreenTop.y = cargoBlackTopDefaultY - 50;
  cargoGreenTop.alpha = 0;
  pixi_app.stage.addChild(cargoGreenTop);

  //mint车盖
  cargoMintTop = PIXI.Sprite.from("./images/mint.png");
  cargoMintTop.anchor.set(0.5);
  cargoMintTop.x = 1096;
  cargoMintTop.y = cargoBlackTopDefaultY - 50;
  cargoMintTop.alpha = 0;
  pixi_app.stage.addChild(cargoMintTop);

  cargoVioletTop = PIXI.Sprite.from("./images/violet.png");
  cargoVioletTop.anchor.set(0.5);
  cargoVioletTop.x = 1096;
  cargoVioletTop.y = cargoBlackTopDefaultY - 50;
  cargoVioletTop.alpha = 0;
  pixi_app.stage.addChild(cargoVioletTop);

  // 设置旋转速度
  let rotationSpeed = 0.008; // 调整这个值来改变旋转速度

  // 创建一个动画循环
  pixi_app.ticker.add((deltaTime) => {
    // 每帧更新精灵的旋转角度
    frontWheel.rotation -= rotationSpeed * deltaTime;
    backWheel.rotation -= rotationSpeed * deltaTime;
  });

  //状态切换函数
  $(".img-box").on("click", function () {
    $(this).addClass("sel-active").siblings().removeClass("sel-active");

    const index = $(this).data("index");

    change_status(parseInt(index));
  });

  $(".color-box").on("click", function () {
    if (statusIndex === 2) {
      return;
    }

    $(this).addClass("sel-active").siblings().removeClass("sel-active");

    const index = $(this).data("index");

    change_color(parseInt(index));
  });

  $(".light-sel-item").on("click", function () {
    if (selLoading) {
      return;
    }

    waitLoading();

    $(this).addClass("sel-active").siblings().removeClass("sel-active");

    const index = $(this).data("index");

    change_lights(parseInt(index));
  });

  $(".light-signals-item").on("click", function () {
    if (statusIndex === 2) {
      return;
    }

    if (selLoading) {
      return;
    }

    selLoading = true;

    const index = $(this).data("index");

    if (parseInt(index) === lightSignalSel) {
      //lightSignalSel = -1;
      $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_DEFAULT"]);
      $(this).removeClass("sel-active");
    } else {
      if (!sideLightsOff) {
        pixi_app.ticker.remove(put_lights);
        pixi_app.ticker.remove(put_lights_slide);
        pixi_app.ticker.add(remove_lights_slide);
        sideLightsOff = true;
      }

      if (index === 0) {
        $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_1"]);
      }

      if (index === 1) {
        $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_2"]);
      }

      $(this).addClass("sel-active").siblings().removeClass("sel-active");
    }

    change_lights_signal(parseInt(index));
  });

  $(".seat-slider").jRange({
    from: 0,
    to: 100,
    step: 1,
    showLabels: false,
    snap: false,
    showScale: false,
    onstatechange: (event) => {
      cargoSeat.x = 1526 + (20 * event) / 100;
      cargoSeat.y = 360 - (60 * event) / 100;
    },
  });

  $(".handle-slider").jRange({
    from: 0,
    to: 100,
    step: 1,
    showLabels: false,
    snap: false,
    showScale: false,
    onstatechange: (event) => {
      if (cargoHandleBottom) {
        event = 0.8 * event;

        cargoHandleBottom.rotation =
          ((-50 * (100 - event)) / 100) * (Math.PI / 180);

        if (event > 60) {
          cargoHandleBottom.x = 1405 + (25 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (60 * (100 - event)) / 100;
        } else if (event > 50) {
          cargoHandleBottom.x = 1405 + (23 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (62 * (100 - event)) / 100;
        } else if (event > 40) {
          cargoHandleBottom.x = 1405 + (21 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (64 * (100 - event)) / 100;
        } else if (event > 30) {
          cargoHandleBottom.x = 1405 + (19 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (66 * (100 - event)) / 100;
        } else if (event > 20) {
          cargoHandleBottom.x = 1405 + (17 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (68 * (100 - event)) / 100;
        } else if (event > 10) {
          cargoHandleBottom.x = 1405 + (15 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (70 * (100 - event)) / 100;
        } else {
          cargoHandleBottom.x = 1405 + (13 * (100 - event)) / 100;
          cargoHandleBottom.y = 265 - (71 * (100 - event)) / 100;
        }

        if (event > 50) {
          cargoHandleTop.x = 1365 - (50 * (100 - event)) / 100;
          cargoHandleTop.y = 145 + (35 * (100 - event)) / 100;
        } else if (event > 40) {
          cargoHandleTop.x = 1365 - (45 * (100 - event)) / 100;
          cargoHandleTop.y = 145 + (35 * (100 - event)) / 100;
        } else if (event > 30) {
          cargoHandleTop.x = 1365 - (40 * (100 - event)) / 100;
          cargoHandleTop.y = 145 + (35 * (100 - event)) / 100;
        } else {
          cargoHandleTop.x = 1365 - (33 * (100 - event)) / 100;
          cargoHandleTop.y = 145 + (35 * (100 - event)) / 100;
        }
      }
    },
  });

  $(".handle-slider").jRange("setValue", "100");

  changeSizeHandle();

  $(window).resize(function () {
    changeSizeHandle();
  });
});

function changeSizeHandle() {
  var width = document.documentElement.clientWidth; // 获取新的宽度

  if (width >= 1230) {
    $(".cargo-itsimple").css("width", "1230px");
    $("#pixi-canvas").css("width", "1200px");
    $("#pixi-canvas canvas").css("transform", "scale(0.5)");
    $("#pixi-canvas canvas").css("left", `0`);
    $(".left-body").css("top", `212px`);
    $(".right-body").css("top", `212px`);
    $(".cargo-itsimple").css("height", `744px`);
  } else if (width < 1200 && width >= 900) {
    const scale = width / 2400;
    $(".cargo-itsimple").css("width", `${width - 30}px`);
    $("#pixi-canvas").css("width", `${width - 30}px`);
    $("#pixi-canvas canvas").css("transform", `scale(${scale})`);
    $("#pixi-canvas canvas").css("left", `0`);

    $(".left-body").css("top", `212px`);
    $(".right-body").css("top", `212px`);
    $(".cargo-itsimple").css("height", `744px`);
  } else {
    const scale = (width * 2) / 2400;
    $(".cargo-itsimple").css("width", `${width}px`);
    $("#pixi-canvas").css("width", `${width}px`);
    $("#pixi-canvas canvas").css("transform", `scale(${scale})`);
    $("#pixi-canvas canvas").css("left", `-${width / 2 - 0.04 * width}px`);

    const height = 1062 * scale;
    $(".left-body").css("top", `${140 + height}px`);
    $(".right-body").css("top", `${140 + height}px`);

    $(".left-body").css("left", `30px`);
    $(".right-body").css("right", `30px`);
    $(".cargo-itsimple").css("height", `${70 + height + 400}px`);
  }
}

//点击切换车状态
function change_status(index) {
  cargoTopSpeed = 1;
  //从0到1，旋转放入雨棚
  if (statusIndex === 0 && index === 1) {
    pixi_app.ticker.remove(remove_rain);
    pixi_app.ticker.remove(put_rain);
    pixi_app.ticker.remove(remove_rain_by_rotation);
    pixi_app.ticker.remove(remove_shadowShield);

    cargoRain.y = 370;
    cargoRain.rotation = 15 * (Math.PI / 180);

    pixi_app.ticker.add(put_shadowShield);
    pixi_app.ticker.add(put_rain_by_rotation);
  }

  //从1到0，旋转隐藏雨棚
  if (statusIndex === 1 && index === 0) {
    pixi_app.ticker.remove(put_rain);
    pixi_app.ticker.remove(remove_rain);
    pixi_app.ticker.remove(put_rain_by_rotation);
    pixi_app.ticker.remove(put_shadowShield);

    cargoRain.y = 370;
    pixi_app.ticker.add(remove_rain_by_rotation);
    pixi_app.ticker.add(remove_shadowShield);
  }

  //从0到2，隐藏黑色车盖+车箱
  if (statusIndex === 0 && index === 2) {
    pixi_app.ticker.remove(put_black_top);
    pixi_app.ticker.remove(put_green_top);
    pixi_app.ticker.remove(put_mint_top);
    pixi_app.ticker.remove(put_violet_top);
    pixi_app.ticker.remove(put_cargoCarriage);
    pixi_app.ticker.remove(put_shadowBody);

    if (lightSignalSel >= 0) {
      pixi_app.ticker.remove(put_lights_1);
      pixi_app.ticker.remove(put_lights_2);
      pixi_app.ticker.remove(changeMaskWidth_once);
      pixi_app.ticker.remove(changeMaskWidth_multe);

      sideLightsOff = false;

      $(".light-signals-item").removeClass("sel-active");
      lightSignalSel = -1;

      $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_DEFAULT"]);

      sideLights1.alpha = 0;
      sideLights2.alpha = 0;
    } else if (lightsSel === 0) {
      lightsSide.alpha = 0;
    }

    pixi_app.ticker.add(remove_shadowBody);

    pixi_app.ticker.add(remove_cargoCarriage);

    if (BoxColorSel === 0) {
      pixi_app.ticker.add(remove_black_top);
    }

    if (BoxColorSel === 1) {
      pixi_app.ticker.add(remove_green_top);
    }

    if (BoxColorSel === 2) {
      pixi_app.ticker.add(remove_mint_top);
    }

    if (BoxColorSel === 3) {
      pixi_app.ticker.add(remove_violet_top);
    }
  }

  //从2到0，显示黑色车盖+车箱
  if (statusIndex === 2 && index === 0) {
    pixi_app.ticker.remove(remove_black_top);
    pixi_app.ticker.remove(remove_green_top);
    pixi_app.ticker.remove(remove_mint_top);
    pixi_app.ticker.remove(remove_violet_top);

    pixi_app.ticker.remove(remove_cargoCarriage);
    pixi_app.ticker.remove(remove_shadowBody);

    if (selLoading) {
      selLoading = false;
    }

    if (lightsSel === 0) {
      if (lightsSide.y >= 506) {
        lightsSide.y = 456;
      } else {
        lightsSide.alpha = 0;
      }
    }

    pixi_app.ticker.add(put_shadowBody);
    pixi_app.ticker.add(put_cargoCarriage);

    if (BoxColorSel === 0) {
      pixi_app.ticker.add(put_black_top);
    }

    if (BoxColorSel === 1) {
      pixi_app.ticker.add(put_green_top);
    }

    if (BoxColorSel === 2) {
      pixi_app.ticker.add(put_mint_top);
    }

    if (BoxColorSel === 3) {
      pixi_app.ticker.add(put_violet_top);
    }
  }

  //从2到1，显示黑色车盖+车箱
  if (statusIndex === 2 && index === 1) {
    cargoRain.y = cargoRainDefaultY - 50;
    cargoRain.rotation = 0;

    pixi_app.ticker.remove(remove_black_top);
    pixi_app.ticker.remove(remove_green_top);
    pixi_app.ticker.remove(remove_mint_top);
    pixi_app.ticker.remove(remove_violet_top);

    pixi_app.ticker.remove(remove_cargoCarriage);
    pixi_app.ticker.remove(remove_rain);
    pixi_app.ticker.remove(remove_shadowBody);
    pixi_app.ticker.remove(remove_shadowShield);

    if (selLoading) {
      selLoading = false;
    }

    if (lightsSel === 0) {
      if (lightsSide.y >= 506) {
        lightsSide.y = 456;
      } else {
      }
    }

    pixi_app.ticker.add(put_shadowShield);
    pixi_app.ticker.add(put_shadowBody);
    pixi_app.ticker.add(put_cargoCarriage);
    pixi_app.ticker.add(put_rain);

    if (BoxColorSel === 0) {
      pixi_app.ticker.add(put_black_top);
    }

    if (BoxColorSel === 1) {
      pixi_app.ticker.add(put_green_top);
    }

    if (BoxColorSel === 2) {
      pixi_app.ticker.add(put_mint_top);
    }

    if (BoxColorSel === 3) {
      pixi_app.ticker.add(put_violet_top);
    }
  }

  //从1到2，隐藏黑色车盖+车箱
  if (statusIndex === 1 && index === 2) {
    pixi_app.ticker.remove(put_black_top);
    pixi_app.ticker.remove(put_green_top);
    pixi_app.ticker.remove(put_mint_top);
    pixi_app.ticker.remove(put_violet_top);

    pixi_app.ticker.remove(put_cargoCarriage);
    pixi_app.ticker.remove(put_rain);

    pixi_app.ticker.remove(put_shadowBody);
    pixi_app.ticker.remove(put_shadowShield);

    if (selLoading) {
      selLoading = false;
    }

    pixi_app.ticker.add(remove_shadowShield);
    pixi_app.ticker.add(remove_shadowBody);
    pixi_app.ticker.add(remove_cargoCarriage);
    pixi_app.ticker.add(remove_rain);

    if (BoxColorSel === 0) {
      pixi_app.ticker.add(remove_black_top);
    }

    if (BoxColorSel === 1) {
      pixi_app.ticker.add(remove_green_top);
    }

    if (BoxColorSel === 2) {
      pixi_app.ticker.add(remove_mint_top);
    }

    if (BoxColorSel === 3) {
      pixi_app.ticker.add(remove_violet_top);
    }

    if (lightSignalSel >= 0) {
      pixi_app.ticker.remove(put_lights_1);
      pixi_app.ticker.remove(put_lights_2);
      pixi_app.ticker.remove(changeMaskWidth_once);
      pixi_app.ticker.remove(changeMaskWidth_multe);

      sideLightsOff = false;

      $(".light-signals-item").removeClass("sel-active");
      lightSignalSel = -1;

      $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_DEFAULT"]);

      sideLights1.alpha = 0;
      sideLights2.alpha = 0;
    }
  }

  if (index === 2) {
    $(".color-body").addClass("disable");
  } else {
    $(".color-body").removeClass("disable");
  }

  if (index === 2) {
    $(".light-status-body").addClass("disable");
  } else {
    $(".light-status-body").removeClass("disable");
  }

  if (index === 0) {
    $(".status-title").text(lang_config["STATUS_DEFAULT"]);
  }

  if (index === 1) {
    $(".status-title").text(lang_config["STATUS_WITH_RAINCOVER"]);
  }

  if (index === 2) {
    $(".status-title").text(lang_config["STATUS_CARGO_BOX_REMOVED"]);
  }

  statusIndex = index;
}

//点击颜色
function change_color(index) {
  if (index === BoxColorSel || statusIndex === 2) {
    return;
  }

  if (statusIndex === 1) {
    cargoBlackTop.alpha = 0;
    cargoGreenTop.alpha = 0;
    cargoMintTop.alpha = 0;
    cargoVioletTop.alpha = 0;
    cargoBlackTop.y = cargoBlackTopDefaultY - 50;
    cargoGreenTop.y = cargoBlackTopDefaultY - 50;
    cargoMintTop.y = cargoBlackTopDefaultY - 50;
    cargoVioletTop.y = cargoBlackTopDefaultY - 50;

    switch (index) {
      case 0:
        cargoBlackTop.alpha = 1;
        cargoBlackTop.y = cargoBlackTopDefaultY;
        break;
      case 1:
        cargoGreenTop.alpha = 1;
        cargoGreenTop.y = cargoBlackTopDefaultY;
        break;
      case 2:
        cargoMintTop.alpha = 1;
        cargoMintTop.y = cargoBlackTopDefaultY;
        break;
      case 3:
        cargoVioletTop.alpha = 1;
        cargoVioletTop.y = cargoBlackTopDefaultY;
        break;
    }

    if (index === 0) {
      $(".color-title").text(lang_config["COLOR_BLACK"]);
    }

    if (index === 1) {
      $(".color-title").text(lang_config["COLOR_GREEN"]);
    }

    if (index === 2) {
      $(".color-title").text(lang_config["COLOR_MINT"]);
    }

    if (index === 3) {
      $(".color-title").text(lang_config["COLOR_VIOLET"]);
    }

    BoxColorSel = index;

    return;
  }

  cargoTopSpeed = 2;

  switch (BoxColorSel) {
    case 0:
      pixi_app.ticker.remove(put_black_top);
      pixi_app.ticker.add(remove_black_top);
      break;
    case 1:
      pixi_app.ticker.remove(put_green_top);
      pixi_app.ticker.add(remove_green_top);
      break;
    case 2:
      pixi_app.ticker.remove(put_mint_top);
      pixi_app.ticker.add(remove_mint_top);
      break;
    case 3:
      pixi_app.ticker.remove(put_violet_top);
      pixi_app.ticker.add(remove_violet_top);
      break;
  }

  setTimeout(() => {
    if (BoxColorSel === index) {
      switch (BoxColorSel) {
        case 0:
          pixi_app.ticker.remove(remove_black_top);
          pixi_app.ticker.add(put_black_top);
          break;
        case 1:
          pixi_app.ticker.remove(remove_green_top);
          pixi_app.ticker.add(put_green_top);
          break;
        case 2:
          pixi_app.ticker.remove(remove_mint_top);
          pixi_app.ticker.add(put_mint_top);
          break;
        case 3:
          pixi_app.ticker.remove(remove_violet_top);
          pixi_app.ticker.add(put_violet_top);
          break;
      }
    }
  }, 300);

  if (index === 0) {
    $(".color-title").text(lang_config["COLOR_BLACK"]);
  }

  if (index === 1) {
    $(".color-title").text(lang_config["COLOR_GREEN"]);
  }

  if (index === 2) {
    $(".color-title").text(lang_config["COLOR_MINT"]);
  }

  if (index === 3) {
    $(".color-title").text(lang_config["COLOR_VIOLET"]);
  }

  BoxColorSel = index;
}

//点击灯光
function change_lights(index) {
  if (index === lightsSel) {
    return;
  }

  if (index === 1) {
    $(".light-title").text(lang_config["LIGHT_OFF"]);

    // if (statusIndex !== 2) {
    //   lightsSide.y = 506;
    // }

    pixi_app.ticker.remove(put_lights);
    pixi_app.ticker.add(remove_lights);
  }

  if (index === 0) {
    $(".light-title").text(lang_config["LIGHT_ON"]);

    if (statusIndex !== 2) {
      lightsSide.y = 506;
    }

    pixi_app.ticker.remove(remove_lights);
    pixi_app.ticker.add(put_lights);
  }

  lightsSel = index;
}

//点击灯光
function change_lights_signal(index) {
  if (index !== lightSignalSel) {
    if (statusIndex === 2) {
      $(".light-signals-item")
        .addClass("sel-active")
        .siblings()
        .removeClass("sel-active");

      lightSignalSel = -1;

      return;
    }

    if (index === 0) {
      $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_1"]);
      pixi_app.ticker.remove(remove_lights_1);
      pixi_app.ticker.remove(put_lights_2);
      pixi_app.ticker.remove(changeMaskWidth_multe);

      sideLights2.alpha = 0;
      pixi_app.ticker.add(put_lights_1);

      pixi_app.ticker.remove(changeMaskWidth_once);
      lightMask1.width = 1;

      pixi_app.ticker.add(changeMaskWidth_once);
    }

    if (index === 1) {
      $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_2"]);
      pixi_app.ticker.remove(remove_lights_2);
      pixi_app.ticker.remove(put_lights_1);

      sideLights1.alpha = 0;
      pixi_app.ticker.add(put_lights_2);

      pixi_app.ticker.remove(changeMaskWidth_multe);
      lightMask2.width = 1;
      pixi_app.ticker.add(changeMaskWidth_multe);
    }

    lightSignalSel = index;
  } else {
    $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_DEFAULT"]);

    pixi_app.ticker.remove(changeMaskWidth_multe);
    pixi_app.ticker.remove(changeMaskWidth_once);
    pixi_app.ticker.remove(put_lights_1);
    pixi_app.ticker.remove(put_lights_2);

    sideLights1.alpha = 0;
    sideLights2.alpha = 0;
    lightSignalSel = -1;

    if (lightsSel === 0) {
      pixi_app.ticker.add(put_lights_slide);

      sideLightsOff = false;
    }
  }

  selLoading = false;
}

//放入雨棚
function put_rain_by_rotation(deltaTime) {
  // 检查当前旋转是否已经达到或超过目标角度
  if (cargoRain.rotation > 0) {
    // 逐渐减少旋转角度
    let rotation =
      cargoRain.rotation - ((15 * (Math.PI / 180)) / 25) * deltaTime;

    if (rotation > 0) {
      cargoRain.rotation = rotation;
    } else {
      cargoRain.rotation = 0;
    }

    cargoRain.alpha += 0.04 * deltaTime;

    // 可以在这里添加更复杂的逻辑，比如基于时间的动画或缓动效果
  } else {
    cargoRain.alpha = 1;
    cargoRain.rotation = 0;
    cargoRain.y = cargoRainDefaultY;
    pixi_app.ticker.remove(put_rain_by_rotation);
  }
}

//旋转隐藏雨棚
function remove_rain_by_rotation(deltaTime) {
  // 检查当前旋转是否已经达到或超过目标角度
  if (cargoRain.rotation < 15 * (Math.PI / 180)) {
    // 逐渐减少旋转角度
    const rotation =
      cargoRain.rotation + ((15 * (Math.PI / 180)) / 25) * deltaTime;

    if (rotation < 15 * (Math.PI / 180)) {
      cargoRain.rotation = rotation;
    } else {
      cargoRain.rotation = 15 * (Math.PI / 180);
    }

    cargoRain.alpha -= 0.04 * deltaTime;

    // 可以在这里添加更复杂的逻辑，比如基于时间的动画或缓动效果
  } else {
    cargoRain.alpha = 0;
    pixi_app.ticker.remove(remove_rain_by_rotation);
  }
}

//放入雨棚
function put_rain(deltaTime) {
  if (cargoRain.y < cargoRainDefaultY) {
    cargoRain.y += 2 * deltaTime;

    cargoRain.alpha += 0.04 * deltaTime;
  } else {
    cargoRain.alpha = 1;
    cargoRain.y = cargoRainDefaultY;
    pixi_app.ticker.remove(put_rain);
  }
}

//隐藏雨棚
function remove_rain(deltaTime) {
  if (cargoRain.y > cargoRainDefaultY - 50) {
    cargoRain.y -= 2 * deltaTime;

    cargoRain.alpha -= 0.04 * deltaTime;
  } else {
    cargoRain.alpha = 0;
    pixi_app.ticker.remove(remove_rain);
  }
}

//放入灯光
function put_lights(deltaTime) {
  if (lightsFront.alpha < 1) {
    lightsFront.alpha += 0.04 * deltaTime;

    if (statusIndex !== 2 && lightSignalSel < 0) {
      lightsSide.alpha += 0.04 * deltaTime;
    }
  } else {
    pixi_app.ticker.remove(put_lights);
  }
}

//隐藏灯光
function remove_lights(deltaTime) {
  if (lightsFront.alpha > 0) {
    lightsFront.alpha -= 0.04 * deltaTime;

    if (statusIndex !== 2) {
      lightsSide.alpha -= 0.04 * deltaTime;
    }
  } else {
    pixi_app.ticker.remove(remove_lights);
  }
}

//放入侧灯光
function put_lights_slide(deltaTime) {
  if (lightsSide.alpha < 1) {
    if (statusIndex !== 2) {
      lightsSide.alpha += 0.04 * deltaTime;
    }
  } else {
    pixi_app.ticker.remove(put_lights_slide);
  }
}

//隐藏侧灯光
function remove_lights_slide(deltaTime) {
  if (lightsSide.alpha > 0) {
    if (statusIndex !== 2) {
      lightsSide.alpha -= 0.04 * deltaTime;
    }
  } else {
    pixi_app.ticker.remove(remove_lights_slide);
  }
}

//放入绿色车盖
function put_green_top(deltaTime) {
  if (statusIndex === 2) {
    pixi_app.ticker.remove(put_green_top);
    cargoGreenTop.alpha = 0;

    return;
  }
  if (cargoGreenTop.y < cargoBlackTopDefaultY) {
    cargoGreenTop.y += 2 * deltaTime * cargoTopSpeed;

    cargoGreenTop.alpha += 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(put_green_top);
  }
}

//隐藏绿色车盖
function remove_green_top(deltaTime) {
  if (cargoGreenTop.y > cargoBlackTopDefaultY - 50) {
    cargoGreenTop.y -= 2 * deltaTime * cargoTopSpeed;

    cargoGreenTop.alpha -= 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(remove_green_top);
  }
}

//放入黑色车盖
function put_black_top(deltaTime) {
  if (statusIndex === 2) {
    pixi_app.ticker.remove(put_black_top);
    cargoBlackTop.y = cargoBlackTopDefaultY - 50;
    cargoBlackTop.alpha = 0;

    return;
  }

  if (cargoBlackTop.y < cargoBlackTopDefaultY) {
    cargoBlackTop.y += 2 * deltaTime * cargoTopSpeed;

    cargoBlackTop.alpha += 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(put_black_top);
  }
}

//隐藏黑色车盖
function remove_black_top(deltaTime) {
  if (cargoBlackTop.y > cargoBlackTopDefaultY - 50) {
    cargoBlackTop.y -= 2 * deltaTime * cargoTopSpeed;

    cargoBlackTop.alpha -= 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(remove_black_top);
  }
}

//放入mint车盖
function put_mint_top(deltaTime) {
  if (statusIndex === 2) {
    pixi_app.ticker.remove(put_mint_top);
    cargoMintTop.y = cargoBlackTopDefaultY - 50;
    cargoMintTop.alpha = 0;

    return;
  }

  if (cargoMintTop.y < cargoBlackTopDefaultY) {
    cargoMintTop.y += 2 * deltaTime * cargoTopSpeed;

    cargoMintTop.alpha += 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(put_mint_top);
  }
}

//隐藏mint车盖
function remove_mint_top(deltaTime) {
  if (cargoMintTop.y > cargoBlackTopDefaultY - 50) {
    cargoMintTop.y -= 2 * deltaTime * cargoTopSpeed;

    cargoMintTop.alpha -= 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(remove_mint_top);
  }
}

//放入violet车盖
function put_violet_top(deltaTime) {
  if (statusIndex === 2) {
    pixi_app.ticker.remove(put_violet_top);
    cargoVioletTop.y = cargoBlackTopDefaultY - 50;
    cargoVioletTop.alpha = 0;

    return;
  }

  if (cargoVioletTop.y < cargoBlackTopDefaultY) {
    cargoVioletTop.y += 2 * deltaTime * cargoTopSpeed;

    cargoVioletTop.alpha += 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(put_violet_top);
  }
}

//隐藏violet车盖
function remove_violet_top(deltaTime) {
  if (cargoVioletTop.y > cargoBlackTopDefaultY - 50) {
    cargoVioletTop.y -= 2 * deltaTime * cargoTopSpeed;

    cargoVioletTop.alpha -= 0.04 * deltaTime * cargoTopSpeed;
  } else {
    pixi_app.ticker.remove(remove_violet_top);
  }
}

//放入车箱
function put_cargoCarriage(deltaTime) {
  if (cargoCarriage.y < cargoCarriageDefaultY) {
    selLoading = true;
    cargoCarriage.y += 2 * deltaTime;
    cargoCarriageBack.y += 2 * deltaTime;

    cargoCarriage.alpha += 0.04 * deltaTime;
    cargoCarriageBack.alpha += 0.04 * deltaTime;

    if (lightsSel === 0) {
      lightsSide.y += 2 * deltaTime;
      lightsSide.alpha += 0.04 * deltaTime;
    }
  } else {
    selLoading = false;
    pixi_app.ticker.remove(put_cargoCarriage);
  }
}

//隐藏车箱
function remove_cargoCarriage(deltaTime) {
  if (cargoCarriage.y > cargoCarriageDefaultY - 50) {
    selLoading = true;
    cargoCarriage.y -= 2 * deltaTime;
    cargoCarriageBack.y -= 2 * deltaTime;

    cargoCarriage.alpha -= 0.04 * deltaTime;
    cargoCarriageBack.alpha -= 0.04 * deltaTime;

    if (lightsSel === 0) {
      lightsSide.y -= 2 * deltaTime;

      if (lightsSide.alpha > 0) {
        lightsSide.alpha -= 0.04 * deltaTime;
      }
    }
  } else {
    selLoading = false;
    cargoCarriage.alpha = 0;

    if (lightsSel === 1) {
      lightsSide.alpha = 0;
    }

    pixi_app.ticker.remove(remove_cargoCarriage);
  }
}

//放入灯光1
function put_lights_1(deltaTime) {
  if (sideLights1.alpha < 1) {
    sideLights1.alpha += 0.04 * deltaTime;
  } else {
    lightsSide.alpha = 0;
    pixi_app.ticker.remove(put_lights_1);
  }
}

//隐藏灯光1
function remove_lights_1(deltaTime) {
  if (sideLights1.alpha > 0) {
    sideLights1.alpha -= 0.04 * deltaTime;
  } else {
    pixi_app.ticker.remove(remove_lights_1);
  }
}

//放入灯光2
function put_lights_2(deltaTime) {
  if (sideLights2.alpha < 1) {
    sideLights2.alpha += 0.04 * deltaTime;
  } else {
    lightsSide.alpha = 0;
    pixi_app.ticker.remove(put_lights_2);
  }
}

//隐藏灯光2
function remove_lights_2(deltaTime) {
  if (sideLights2.alpha > 0) {
    sideLights2.alpha -= 0.04 * deltaTime;
  } else {
    pixi_app.ticker.remove(remove_lights_2);
  }
}

//修改遮罩宽度，单次
function changeMaskWidth_once(deltaTime) {
  if (lightSignalSel !== 0) {
    pixi_app.ticker.remove(changeMaskWidth_once);
    sideLights1.alpha = 0;
  }

  const speed = 2 * deltaTime; // 展开速度
  if (lightMask1.width < sideLights1.width * 1.5) {
    lightMask1.width += speed; // 增加遮罩宽度
  } else {
    lightMask1.width = 1;
  }

  lightsSide.alpha = 0;
}

//修改遮罩宽度，循环
function changeMaskWidth_multe(deltaTime) {
  if (lightSignalSel !== 1) {
    pixi_app.ticker.remove(changeMaskWidth_once);
    sideLights2.alpha = 0;
  }

  const speed = 2 * deltaTime; // 展开速度
  if (lightMask2.width < sideLights2.width) {
    lightMask2.width += speed; // 增加遮罩宽度
  } else {
    lightMask2.width = 1;
  }

  lightsSide.alpha = 0;
}

//放入shadowBody
function put_shadowBody(deltaTime) {
  if (shadowBody.alpha < 1) {
    shadowBody.alpha += 0.02 * deltaTime;
  } else {
    shadowBody.alpha = 1;
    pixi_app.ticker.remove(put_shadowBody);
  }
}

//隐藏灯光shadowBody
function remove_shadowBody(deltaTime) {
  if (shadowBody.alpha > 0) {
    shadowBody.alpha -= 0.02 * deltaTime;
  } else {
    shadowBody.alpha = 0;
    pixi_app.ticker.remove(remove_shadowBody);
  }
}

//放入shadowShield
function put_shadowShield(deltaTime) {
  if (shadowShield.alpha < 1) {
    shadowShield.alpha += 0.02 * deltaTime;
  } else {
    shadowShield.alpha = 1;
    pixi_app.ticker.remove(put_shadowShield);
  }
}

//隐藏灯光shadowShield
function remove_shadowShield(deltaTime) {
  if (shadowShield.alpha > 0) {
    shadowShield.alpha -= 0.02 * deltaTime;
  } else {
    shadowShield.alpha = 0;
    pixi_app.ticker.remove(remove_shadowShield);
  }
}

function waitLoading() {
  selLoading = true;
  setTimeout(() => {
    selLoading = false;
  }, 300);
}

function langChange() {
  fetch(`./js/lang/${lang_mark}.json`)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok " + response.statusText);
      }

      response.json().then((data) => {
        lang_config = data;

        $(".logo-txt").text(lang_config["CARGO_GO_TITLE"]);

        $(".status-big-title").text(lang_config["STATUS_TITLE"]);
        $(".status-title").text(lang_config["STATUS_DEFAULT"]);

        $(".color-big-title").text(lang_config["COLOR_TITLE"]);
        $(".color-title").text(lang_config["COLOR_BLACK"]);

        $(".stem-big-title").text(lang_config["STEM_TITLE"]);

        $(".light-big-title").text(lang_config["LIGHT_TITLE"]);
        $(".light-title").text(lang_config["LIGHT_OFF"]);

        $(".light-signals-big-title").text(lang_config["LIGHTS_SIGNALS_TITLE"]);
        $(".light-signals-title").text(lang_config["LIGHTS_SIGNALS_DEFAULT"]);

        $(".seatpost-big-title").text(lang_config["SEATPOST_TITLE"]);
      });
    })
    .then((json) => {
      console.log(json); // 处理你的 JSON 数据
    })
    .catch((error) => {
      console.error(
        "There has been a problem with your fetch operation:",
        error
      );
    });
}
